<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input v-model="form.number" placeholder="物料编码" style="width: 150px;" clearable @keyup.enter.native="searchBtn" size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.name" placeholder="物料名称" style="width: 150px;" clearable @keyup.enter.native="searchBtn" size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-cascader filterable size="small" style="width: 180px" :props="{ checkStrictly: true }" clearable
                                 :options="materielCategory" v-model="form.materiel_category_id" placeholder="物料分类"></el-cascader>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.supplier" filterable remote placeholder="输入搜索的工厂名称" size="small" style="width: 200px"
                               :remote-method="searchFactoryBtn" :loading="searchLoading" clearable>
                        <el-option v-for="(item,index) in factoryList" :label="item.factory_name" :value="item.factory_name" :key="index" ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="btnLoading">查询</el-button>
                    <el-button type="warning" class="el-icon-plus" size="small" @click="addBtn" :disabled="!nodeActions.includes('add')">&nbsp;新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="mini" row-key="id" highlight-current-row>
                <el-table-column prop="img" label="图片" width="50">
                    <template slot-scope="{row}">
                        <el-image :src="row.img" fit="contian" :preview-src-list="[row.img]">
                            <div slot="error" class="image-slot">
                                <svg t="1718681716906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2623" width="20" height="20"><path d="M400.696 268.795c-17.249 0-31.233 13.986-31.233 31.233v30.471c0 17.249 13.986 31.233 31.233 31.233s31.233-13.986 31.233-31.233v-30.471c0-17.249-13.985-31.233-31.233-31.233z" fill="#999999" p-id="2624"></path><path d="M623.649 361.734c17.249 0 31.234-13.986 31.234-31.233v-30.471c0-17.249-13.986-31.233-31.234-31.233s-31.233 13.986-31.233 31.233v30.471c-0.001 17.248 13.985 31.233 31.233 31.233z" fill="#999999" p-id="2625"></path><path d="M438.295 388.804c-14.656 9.104-19.155 28.362-10.050 43.013 11.209 18.047 41.976 48.59 86.157 48.59 43.958 0 75.1-30.313 86.574-48.223 9.303-14.529 5.068-33.847-9.455-43.15-14.539-9.298-33.852-5.068-43.15 9.455-0.122 0.199-13.38 19.45-33.969 19.45-20.009 0-32.444-18.128-33.278-19.373-9.166-14.423-28.28-18.805-42.829-9.761z" fill="#999999" p-id="2626"></path><path d="M824.508503 116.690676 571.592236 116.690676c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c40.181141 0 72.878844 32.692586 72.878844 72.878844l0 396.966057-189.334159-165.29465c-12.20088-10.655687-30.517037-10.207479-42.173518 0.9967L468.578048 674.16231 309.521472 517.519714c-11.895935-11.70253-30.903847-12.002358-43.154869-0.645706L126.957507 646.163629l0-394.126382c0-40.186258 32.692586-72.878844 72.878844-72.878844l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352S470.000444 116.690676 452.751594 116.690676L199.836351 116.690676c-74.632791 0-135.346571 60.71378-135.346571 135.346571l0 520.56405c0 74.632791 60.71378 135.346571 135.346571 135.346571l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352s-13.985526-31.233352-31.233352-31.233352L199.836351 845.481164c-40.186258 0-72.878844-32.692586-72.878844-72.878844l0-41.23924 160.003134-148.385539 159.428036 157.007917c12.048407 11.865235 31.361265 11.981892 43.546795 0.274246l198.576661-190.68697 208.876238 182.346001 0 40.683585c0 40.186258-32.697703 72.878844-72.878844 72.878844L571.592236 845.481164c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c74.627674 0 135.346571-60.71378 135.346571-135.346571L959.855074 252.037247C959.855074 177.404456 899.136178 116.690676 824.508503 116.690676z" fill="#999999" p-id="2627"></path></svg>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="number" label="物料编码" width="130"></el-table-column>
                <el-table-column prop="name" label="物料名称" width="200" show-overflow-tooltip></el-table-column>
                <el-table-column prop="materiel_major_category_name" label="物料类型" width="90"></el-table-column>
                <el-table-column prop="materiel_category_type" label="物料分类" width="120">
                    <template slot-scope="{row}">
                        {{row.materiel_category_type}}
                        <el-tag size="mini" v-if="attributeMap[row.materiel_attribute_id]">{{attributeMap[row.materiel_attribute_id]['name']}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="materiel_major_unit_name" label="单位" width="60"></el-table-column>
                <el-table-column prop="materiel_attribute" label="属性">
                    <template slot-scope="{ row }">
                        <el-popover placement="left-start" width="250" trigger="click">
                            <el-row style="font-size: 12px;">
                                <div v-for="(item, index) in JSON.parse(row.materiel_attribute)" :key="index" style="display: flex;margin-top:6px;align-items: center;border-radius: 4px;background-color: #f4f4f4;margin-right:2px;border: 1px solid #888080;">
                                    <span style="display:block;padding: 1px 2px;background-color: #888080;color: #FFFFFF;">{{ item.name }}</span>
                                    <span style="display: block;margin:0 2px">{{ item.value == "true" ? "是" : (item.value == "false" ? "否" : item.value) }}</span>
                                </div>
                            </el-row>
                            <div slot="reference" class="ellipsis" style="width: 100%;display: flex;font-size: 11px;">
                                <div v-for="(item, index) in JSON.parse(row.materiel_attribute)" :key="index" style="display: flex;align-items: center;border-radius: 4px;background-color: #f4f4f4;margin-right:2px;border: 1px solid #888080;">
                                    <span style="display:block;padding: 1px 2px;background-color: #888080;color: #FFFFFF;">{{ item.name }}</span>
                                    <span style="display: block;padding:1px 2px;margin:0 2px">{{ item.value == "true" ? "是" : (item.value == "false" ? "否" : item.value) }}</span>
                                </div>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="成本价" width="70"></el-table-column>
                <el-table-column prop="supplier" label="供应商" width="90" show-overflow-tooltip></el-table-column>
                <el-table-column prop="supplier_phone" label="供应商电话" width="90" show-overflow-tooltip></el-table-column>
                <el-table-column prop="remark" label="备注" width="200" show-overflow-tooltip></el-table-column>
                <el-table-column prop="creator" label="创建人" width="90"></el-table-column>
                <el-table-column prop="creation_time" label="创建时间" width="135"></el-table-column>
                <el-table-column label="操作" fixed="right" width="130">
                    <template slot-scope="{row}">
                        <el-button type="text" size="small" class="el-icon-edit" @click="editBtn(row)" :disabled="!nodeActions.includes('edit')">&nbsp;编辑</el-button>
                        <el-button type="text" size="small" class="el-icon-delete" @click="delBtn(row)" :disabled="!nodeActions.includes('del')">&nbsp;删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>

        <!--新增、编辑-->
        <el-drawer :title="editTitle" :visible.sync="editVisible" size="700px" direction="rtl" :wrapperClosable="false" :before-close="closeBtn">
            <el-row style="padding: 0 0 10px 10px;overflow-y:auto;" :style="{'height': drawerTableHeight}">
                <el-col :span="24">
                    <div style="margin-bottom: 10px;">
                        <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="20" height="20"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                        <span style="font-size: 18px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">物料图片</span>
                    </div>
                    <el-upload action="/api/tool/fileImport" list-type="picture-card" style="margin-top: 10px;" class="design-upload" drag
                               :headers="uploadHeaders"
                               :data="uploadData"
                               :file-list="materielImg"
                               :on-success="(res, file, fileList)=>uploadSuccessHandle( res, file, fileList)"
                               :before-upload="beforeUploadHandle">
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{file}">
                            <div style="width: 146px;height: 146px;">
                                <img class="el-upload-list__item-thumbnail" :src="file.url" />
                            </div>
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="previewImgBtn(file)">
                                  <i class="el-icon-zoom-in"></i>
                                </span>
                                <span class="el-upload-list__item-delete" @click="delImgBtn(file,'detail_drawing')">
                                  <i class="el-icon-delete"></i>
                                </span>
                            </span>
                        </div>
                    </el-upload>
                    <div style="margin: 10px 0 0 0;">
                        <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="20" height="20"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                        <span style="font-size: 18px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">基本信息</span>
                    </div>
                    <el-form :model="editForm" inline label-position="right" label-width="120px" :rules="rules">
                        <el-form-item label="物料编码：">
                            <el-input size="small" v-model.trim="editForm.number" placeholder="物料编码" style="width: 210px;" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="物料名称：" prop="name">
                            <el-input size="small" v-model.trim="editForm.name" placeholder="请输入物料名称" style="width: 210px;" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="物料单位：" prop="materiel_major_unit_id">
                            <el-select v-model="editForm.materiel_major_unit_id" size="small" placeholder="物料主单位" style="width: 210px;" clearable
                                @change="unitChange">
                                <el-option v-for="(item, index) in unitList" :key="index" :value=item.id :label="item.name"></el-option>
                            </el-select>
                        </el-form-item>
<!--                        <el-form-item label="物料次单位：" prop="materiel_minor_unit_id">-->
<!--                            <el-select v-model="editForm.materiel_minor_unit_id" size="small" placeholder="物料次单位" style="width: 210px;" clearable>-->
<!--                                <el-option v-for="(item, index) in unitList" :key="index" :value=item.id :label="item.name"></el-option>-->
<!--                            </el-select>-->
<!--                        </el-form-item>-->
                        <el-form-item label="成本价：">
                            <el-input-number v-model="editForm.price" controls-position="right" style="width: 210px;" :min="0" size="small"></el-input-number>
                        </el-form-item>
                        <el-form-item label="备注：">
                            <el-input type="textarea" :autosize="{minRows:2,maxRows:2}" v-model="editForm.remark" style="width: 505px;" placeholder="备注"></el-input>
                        </el-form-item>
                    </el-form>
                    <div style="margin: 10px 0 0 0;">
                        <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="20" height="20"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                        <span style="font-size: 18px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">物料分类</span>
                    </div>
                    <el-form :model="editForm" label-position="right" label-width="120px" :rules="rules">
                        <el-form-item label="添加分类：" prop="materiel_type_list">
                            <el-cascader ref="categoryRef" filterable size="small" style="width: 90%" :props="{ checkStrictly: true }" @change="categoryChange"
                                     :options="materielCategory" v-model="editForm.materiel_type_list" placeholder="物料分类"></el-cascader>
                        </el-form-item>
                        <el-form-item label="物料属性：" prop="materiel_category_id">
                            <el-select v-model="editForm.materiel_attribute_id" size="small" placeholder="物料属性" style="width: 210px;" disabled>
                                <el-option v-for="(item, index) in attributeList" :key="index" :value=item.id :label="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="添加属性：">
                            <el-form label-position="right" class="attribute-box" label-width="90px">
                                <template v-if="attributeMap[editForm.materiel_attribute_id]">
                                    <el-form-item v-for="(detailItem, index) in attributeMap[editForm.materiel_attribute_id]['detail']" :key="index" :label="detailItem.name+'：'">
                                        <el-input v-if="detailItem['inputType'] == 'TEXT'" v-model.trim="editForm.materiel_attribute[detailItem.id]['value']"
                                                  size="small" :placeholder="'输入'+detailItem.name" style="width:88%" clearable></el-input>
                                        <el-input v-else-if="detailItem['inputType'] == 'NUMBER'" v-model.trim="editForm.materiel_attribute[detailItem.id]['value']"
                                                  size="small" :placeholder="'输入'+detailItem.name" style="width:88%" clearable></el-input>
                                        <el-select v-else-if="detailItem['inputType'] == 'LIST'" v-model="editForm.materiel_attribute[detailItem.id]['value']"
                                                  size="small" placeholder="无" style="width: 88%" clearable>
                                            <el-option v-for="(v, i) in detailItem['value']" :key="i" :value="v" :label="v"></el-option>
                                        </el-select>
                                        <el-radio-group v-else-if="detailItem['inputType'] == 'BOOL'" v-model.trim="editForm.materiel_attribute[detailItem.id]['value']">
                                            <el-radio label="true">是</el-radio>
                                            <el-radio label="false">否</el-radio>
                                            <el-radio label="">无</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </template>
                            </el-form>
                        </el-form-item>
                    </el-form>
                    <div style="margin: 10px 0 0 0;">
                        <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="20" height="20"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                        <span style="font-size: 18px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">供应商</span>
                    </div>
                    <el-form label-position="right" label-width="120px">
                        <el-form-item label="供应商名称：">
                            <el-select v-model="editForm.supplier" filterable remote placeholder="输入搜索的工厂名称" size="small" style="width: 90%;"
                                       :remote-method="searchFactoryBtn" @change="factoryChangeBtn($event)" :loading="searchLoading" clearable>
                                <el-option v-for="(item,index) in factoryList" :label="item.factory_name" :value="item.factory_name" :key="index" ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="联系人：">
                            <el-input size="small" disabled v-model="editForm.supplier_contact_name" style="width: 90%;"></el-input>
                        </el-form-item>
                        <el-form-item label="联系电话：">
                            <el-input size="small" disabled v-model="editForm.supplier_phone" style="width: 90%;"></el-input>
                        </el-form-item>
                        <el-form-item label="联系地址：">
                            <el-input size="small" disabled v-model="editForm.supplier_address" style="width: 90%;"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <div style="width: 100%;position: absolute;bottom: 10px;padding: 8px;border-top: 1px #ebeef5 solid;">
                <el-button @click="closeBtn">退 出</el-button>
                <el-button type="primary" @click="saveBtn" :loading="saveLoading">{{ saveLoading ? '提交中 ...' : '保 存' }}</el-button>
            </div>
        </el-drawer>

        <!--图片预览-->
        <el-dialog :visible.sync="previewVisible" width="500px" top="10px">
            <img width="100%" height="600px" style="object-fit: contain" :src="previewUrl" alt="">
        </el-dialog>
    </section>
</template>

<script>

import {materielCategory, materielDel, materielList, materielSave} from "../../api/bs/materiel";
import {attribute, munitList} from "../../api/bs/info";
import {getToken} from "../../libs/util";
import {factoryList} from "../../api/produce/factory";

export default {
    name: "bs_materiel",
    data() {
        return {
            tableHeight: window.innerHeight - 210,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            unitList: [],
            attributeList: [],
            attributeMap:{},
            materielCategory: [],
            form: {name: "", number: "", materiel_category_id: []},

            drawerTableHeight: window.innerHeight - 150+"px",
            editVisible: false,
            saveLoading: false,
            editTitle: "修改方案",
            materielImg: [],
            editForm: {},
            rules: {
                name: [{ required: true, message: '请输入物料编码', trigger: 'change' }],
                materiel_major_unit_id: [{ required: true, message: '请输入物料主单位', trigger: 'change' }],
                materiel_minor_unit_id: [{ required: true, message: '请输入物料次单位', trigger: 'change' }],
                materiel_type_list: [{ required: true, message: '请选择物料分类', trigger: 'change', validator: (rule, value, callback) => {callback()}}],
                materiel_category_id:[{ required: true, message: '请输入物料属性', trigger: 'change' }],
            },
            searchLoading: false,
            factoryList: [],

            previewUrl: "",
            previewVisible: false,
            uploadHeaders: {},
            uploadData:{type: 'bs_materiel', disk: 'material'},
        }
    },
    watch:{
        // 监听路由参数的变化
        '$route.params.number': {
            immediate: true,
            handler(val) {
                if(!!val && val != this.form.number){
                    this.$set(this.form, 'number', val);
                    this.searchBtn();
                }
            }
        },
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    methods: {
        //搜索加工厂
        searchFactoryBtn(val){
            if(val == ""){
                return;
            }
            this.getFactoryData(val);
        },
        getFactoryData(name){
            factoryList({page: 1, limit: 200, factory_name: name, tab: 8, status: 0}).then((res) =>{
                this.factoryList = res.data.data;
            })
        },
        factoryChangeBtn(val){
            this.factoryList.forEach(item => {
                if(item.factory_name == val){
                    this.editForm.supplier_id = item.id;
                    this.editForm.supplier_contact_name = item.legal_person;
                    this.editForm.supplier_phone = item.contact_phone;
                    this.editForm.supplier_address = item.contact_address;
                }
            })
        },
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit
            };
            param = Object.assign(param, this.form);
            this.loading = true;
            this.btnLoading = true;
            materielList(param).then((res) => {
                this.loading = false;
                this.btnLoading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
                this.btnLoading = false;
            });
        },
        getMaterielCategory(){
            materielCategory().then((res) =>{
                this.materielCategory = res.data;
            });
        },
        getAttributeData() {
            attribute().then((res) =>{
                this.attributeList = res.data;
                res.data.map(item => { this.attributeMap[item.id] = item})
            });
        },
        getUnitData(){
            munitList({page:1, limit: 1000}).then((res) =>{
                this.unitList = res.data.data;
            })
        },
        delBtn(row){
            this.$confirm("确定删除此物料?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.loading = true;
                materielDel({id: row.id}).then((res) =>{
                    this.loading = false;
                    if(res.code === 0){
                        this.$message.success(res.msg);
                        this.getData();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            }).catch(() => {

            });
        },

        //上传之前的检测
        beforeUploadHandle(file) {
            if(!['image/jpg','image/jpeg','image/png'].includes(file.type)){
                this.$message.error('上传图片只能是 jpg、png 格式!');
                return false;
            }
            this.uploadHeaders.Authorization = 'Bearer '+ getToken();
            return true;
        },
        //上传成功
        uploadSuccessHandle(res, file, fileList) {
            if(res.code === 0){
                this.materielImg = [ fileList[fileList.length-1] ];
                this.$message.success("上传成功");
            }else{
                this.$message.error(res.msg);
                fileList = fileList.filter(item => (item.response && item.response.code === 0 || !item.response));
                this.materielImg = fileList;
            }
        },
        //删除图片
        delImgBtn(file){
            this.materielImg.splice(0, 1);
        },
        //预览
        previewImgBtn(file){
            this.previewUrl = file.url;
            this.previewVisible = true;
        },

        //物料单位修改
        unitChange(val){
            this.$set(this.editForm, 'materiel_minor_unit_id', val);
        },
        //修改物料分类
        categoryChange(e){
            if (e && e.length) {
                this.$nextTick(() => {
                    let node = this.$refs.categoryRef.getCheckedNodes();
                    console.log("选择", node[0].data);
                    this.$set(this.editForm, "materiel_attribute_id", node[0].data.attribute_id);//物料属性
                    this.$set(this.editForm, "materiel_category_id", node[0].data.value);//绑定物料分类id
                    this.$set(this.editForm, "materiel_major_category_id", node[0].data.category_id);//主料 辅料 特殊工艺
                    let materielAttribute = {};
                    this.attributeMap[this.editForm.materiel_attribute_id].detail.map(item => {
                        if(!materielAttribute[item.id]){
                            materielAttribute[item.id] = {name: item.name, value:""};
                        }
                    });
                    this.$set(this.editForm, 'materiel_attribute', materielAttribute);
                });
            }
        },
        closeBtn(){
            this.editVisible = false;
            this.editForm = {};
            this.materielImg = [];
        },
        addBtn(){
            this.editVisible = true;
            this.editTitle = "新增档案";
            this.editForm = Object.assign({});
            this.materielImg = [];
        },
        editBtn(row){
            this.editVisible = true;
            this.editTitle = "修改档案";
            this.editForm = JSON.parse(JSON.stringify(row));
            if(row.img){
                this.materielImg = [{url: row.img}];
            }
            let materielTypeList = [row.materiel_major_category_id, row.materiel_category_id];
            if(row.materiel_category_pid !== 0){
                materielTypeList.splice(1, 0, row.materiel_category_pid);
            }
            this.$set(this.editForm, 'materiel_type_list', materielTypeList);
            let materielAttribute = JSON.parse(row.materiel_attribute);
            this.attributeMap[this.editForm.materiel_attribute_id].detail.map(item => {
                if(!materielAttribute[item.id]){
                    materielAttribute[item.id] = {name: item.name, value:""};
                }
            });
            this.$set(this.editForm, 'materiel_attribute', materielAttribute);
            console.log("物料档案",this.editForm)
        },
        saveBtn(){
            if(!this.editForm.name || !this.editForm.materiel_major_unit_id || !this.editForm.materiel_minor_unit_id){
                this.$message.warning("必填信息不能为空");return;
            }
            if (this.editForm.materiel_attribute_id === null || this.editForm.materiel_attribute_id === undefined || this.editForm.materiel_attribute_id === '') {
                this.$message.warning("必填信息不能为空");return;
            }
            let img = this.materielImg[0] && this.materielImg[0]['response'] ? this.materielImg[0]['response']['data']
                : (this.materielImg[0] && this.materielImg[0].url ? this.materielImg[0].url : "");
            this.editForm.img = img;
            this.saveLoading = true;
            materielSave({data: JSON.stringify(this.editForm)}).then((res) =>{
                this.saveLoading = false;
                if(res.code === 0){
                    this.$message.success(res.msg);
                    this.closeBtn();
                    this.getData();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(() =>{
                this.saveLoading = false;
            })
        }
    },
    mounted() {
        this.getUnitData();
        this.getAttributeData();
        this.getMaterielCategory();
        this.searchBtn();
    }
}
</script>

<style scoped>
.ellipsis {
    overflow: hidden; /* 确保超出容器的内容被裁剪 */
    white-space: nowrap; /* 确保文本在一行内显示 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}
.el-image /deep/ .el-icon-circle-close:before{
    color: white;
}
.attribute-box /deep/ .el-form-item__label{
    font-weight: bold;
}

.el-upload-list__item-thumbnail{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*上传模块*/
.design-upload /deep/ .el-upload--picture-card{
    border: none;
}
.design-upload /deep/ .el-upload-dragger{
    width: 146px;
    height: 146px;
}
/*上传模块*/
</style>
